<div th:replace="~{sidebar :: layout('首页', _, ~{::.main}, ~{::#js})}" xmlns:th="http://www.thymeleaf.org">
    <!-- 主内容区域 -->
    <div class="main-content main" id="mainContent">
        <div class="header">
            <h1 id="contentTitle">客户管理</h1>
            <div class="user-actions">
                <button class="btn btn-primary" id="addCustomerBtn">
                    <i class="icon-customers"></i> 添加客户
                </button>
                <button class="toggle-sidebar" id="toggleSidebar">☰</button>
            </div>
        </div>

        <!-- 客户统计卡片 -->
        <div class="customer-stats">
            <div class="stat-card">
                <div class="stat-value" th:text="${users.getTotalElements()}">248</div>
                <div class="stat-label">总客户数</div>
            </div>
        </div>

        <!-- 客户表格 -->
        <div class="customer-table-container">
            <div class="table-header">
                <div class="search-box">
                    <i class="icon-dashboard"></i>
                    <input type="text" id="searchInput" th:value="${searchName}" placeholder="搜索客户...">
                    <a th:if="${!#strings.isEmpty(searchName)}" th:href="${'/user'}"
                       title="清除搜索条件">
                    </a>
                </div>
            </div>

            <table id="customerTable">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>备用电话</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody th:each="user : ${users.getContent()}">
                <!-- 客户数据将通过JavaScript动态加载 -->
                <td th:text="${user.getId()}">ID</td>
                <td th:text="${user.getName()}">姓名</td>
                <td th:text="${user.getMobile()}">电话</td>
                <td th:text="${user.getSpareMobile()}">备用电话</td>
                <td th:text="${user.getAddress()}">地址</td>
                <td>
                    <a class="action-btn edit-btn" th:attr="data-id=${user.getId()}" th:data-name="${user.getName()}"
                       th:data-mobile="${user.getMobile()}" th:data-sparemobile="${user.getSpareMobile()}"
                       th:data-address="${user.getAddress()}">编辑</a>
                    <a class="action-btn"
                       th:href="@{'/user/delete/' + ${user.getId()}}"
                       onclick="return confirm('确认删除?')">
                        删除
                    </a>
                </td>
                </tbody>
            </table>

            <div class="pagination" th:if="${users.getTotalElements() > 0}">
                <a class="btn btn-secondary" id="prevPage" th:if="${users.hasPrevious()}"
                   th:href="@{/user(current=${users.getNumber() > 0 ? users.getNumber() - 1 : 0},
                  page=10,
                  name=${searchName})}"
                   th:unless="${users.first}">上一页</a>
                <span class="page-info">当前第 [[${users.getNumber() + 1} ]] / [[${users.getTotalPages()}]] 页， 共计 [[${users.getTotalElements()}]] 条记录</span>
                <a class="btn btn-secondary" id="nextPage" th:if="${users.hasNext()}"
                   th:href="@{/user(current=${users.getNumber() + 1},
                  page=10,
                  name=${searchName})}"
                   th:unless="${users.last}">下一页</a>
            </div>
        </div>
    </div>

    <!-- 添加/编辑客户模态框 -->
    <div class="modal main" id="customerModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加新客户</h3>
                <span class="close-btn">&times;</span>
            </div>
            <form id="customerForm" th:action="@{/user/save}" method="post">
                <div class="modal-body">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input name="name" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="mobile">电话</label>
                        <input name="mobile" type="tel" required>
                    </div>
                    <div class="form-group">
                        <label for="spareMobile">备用电话</label>
                        <input name="spareMobile" type="tel">
                    </div>
                    <div class="form-group">
                        <label for="address">地址</label>
                        <input name="address" type="text" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary close-btn">取消</button>
                    <button class="btn btn-primary" type="submit">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script th:src="@{/js/classify/user_information.js}" id="js"></script>
</div>